<template>
    <page-header-wrapper>
        <a-card :bordered="false">
            <div class="table-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="6" :sm="24">
                            <a-form-item label="规则编号">
                                <a-input v-model="queryParam.id" placeholder=""/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="24">
                            <a-form-item label="使用状态">
                                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                                    <a-select-option value="0">全部</a-select-option>
                                    <a-select-option value="1">关闭</a-select-option>
                                    <a-select-option value="2">运行中</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <template v-if="advanced">
                            <a-col :md="6" :sm="24">
                                <a-form-item label="调用次数">
                                    <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <a-form-item label="更新日期">
                                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <a-form-item label="使用状态">
                                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
                                    <a-select-option value="0">全部</a-select-option>
                                    <a-select-option value="1">关闭</a-select-option>
                                    <a-select-option value="2">运行中</a-select-option>
                                </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :md="6" :sm="24">
                                <a-form-item label="使用状态">
                                    <a-select placeholder="请选择" default-value="0">
                                        <a-select-option value="0">全部</a-select-option>
                                        <a-select-option value="1">关闭</a-select-option>
                                        <a-select-option value="2">运行中</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </template>
                        <a-col :md="6" :sm="24">
                            <div class="ant-row ant-form-item">
                                <div class="ant-col ant-form-item-label"></div>
                                <div class="ant-col ant-form-item-control-wrapper">
                                    <div class="ant-form-item-control">
                                        <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                                        <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                                        <a @click="toggleAdvanced" style="margin-left: 8px">
                                            {{ advanced ? '收起' : '展开' }}<a-icon :type="advanced ? 'up' : 'down'"/>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <div class="table-operator">
                <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
                <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
                    <a-menu slot="overlay">
                        <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
                        <!-- lock | unlock -->
                        <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
                    </a-menu>
                    <a-button style="margin-left: 8px">
                        批量操作 <a-icon type="down" />
                    </a-button>
                </a-dropdown>
            </div>
            <div style="margin-top: 20px">
                <a-table :columns="userList.columns" rowKey="id" :data-source="userList.list" :row-selection="rowSelection">
                    <div slot="avatar" slot-scope="value">
                        <a-avatar size="small" :src="value"/>
                    </div>
                </a-table>
            </div>
        </a-card>
    </page-header-wrapper>
</template>

<script>
import http from '@/helper/request'
export default {
    data () {
        return {
            queryParam: {},
            advanced: false,
            selectedRowKeys: [],
            selectedRows: [],
            userList: {
                page: 1,
                pageSize: 10,
                list: [],
                columns: [
                    {},
                    { title: '用户账号', dataIndex: 'account.name' },
                    { title: '昵称', dataIndex: 'nickname' },
                    { title: '头像', dataIndex: 'avatar', scopedSlots: { customRender: 'avatar' } },
                    { title: '手机号码', dataIndex: 'phone' },
                    { title: '邮箱', dataIndex: 'email' },
                    { title: '地址', dataIndex: 'address' },
                    { title: '状态' },
                    { title: '操作' }
                ]
            },
            rowSelection: {
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                },
                onSelect: (record, selected, selectedRows) => {
                    console.log(record, selected, selectedRows)
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                    console.log(selected, selectedRows, changeRows)
                }
            }
        }
    },
    mounted () {
        this.queryData()
    },
    methods: {
        queryData () {
            return http.get('/user/list').then(({ data }) => {
                this.userList.list = data
            })
        },
        toggleAdvanced () {
            this.advanced = !this.advanced
        },
        handleAdd () {
            this.mdl = null
            this.visible = true
        },
        handleEdit (record) {
            this.visible = true
            this.mdl = { ...record }
        },
        refresh () {}
    }
}
</script>

<style lang="less">
.table-search-wrapper {
    .ant-form-inline .ant-form-item {
        display: flex;
        margin-bottom: 24px;
        margin-right: 0;
    }
    .ant-form-item-control-wrapper {
        flex: 1;
        display: inline-block;
        vertical-align: middle;
    }
}
</style>
